<template>
    <div class="exam-container">

  <el-descriptions
    title="新增试题"
    direction="vertical"
    :column="2"
    border
  >
    <el-descriptions-item label="题干" :span="2">
        <div ref="contentRef"></div>
    </el-descriptions-item>
    
    <el-descriptions-item label="类型" width="60%">
        <el-select v-model="typeX" wi placeholder="请选择题型" style="width: 100%;">
    <el-option
      v-for="item in types"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
    </el-descriptions-item>

    <el-descriptions-item label="难度">
        <el-input-number v-model="lv" :min="1" :max="10" style="width: 100%;" />
    </el-descriptions-item>

    <el-descriptions-item label="标签" :span="2">
        <el-checkbox-group v-model="checkLists">
        <el-checkbox label="JAVA" />
        <el-checkbox label="NET" />
        <el-checkbox label="UI" />
        <el-checkbox label="TEST" />
        <el-checkbox label="WEB前端" />
  </el-checkbox-group>
    </el-descriptions-item>
   
    <el-descriptions-item label="选项" :span="2">
        <div style="text-align: end; ">
            <el-button type="warning" plain @click="addOption"  size="medium">追加</el-button>
            <el-button type="danger" plain   size="medium" :disabled="qOptions.length<3" @click="minusOption">移除</el-button>
        </div>
        <div style="margin-top: 10px;" v-for="item in qOptions" :key="item.id">
            <el-tag  size="small">选项{{item.id}}</el-tag>
            <el-input type="textarea" v-model="item.content"></el-input>
        </div>
    </el-descriptions-item>

    <el-descriptions-item label="答案" :span="2">
        <el-checkbox-group v-model="answer"  @change=result>
        <el-checkbox   v-for="(item,index) in qOptions" :key="index" :label="index">
            选项{{index+1}}
        </el-checkbox>
      
        
  </el-checkbox-group> 
    </el-descriptions-item>


    <el-descriptions-item label="解析" :span="2">
        <el-input type="textarea" v-model="analysis"></el-input>
    </el-descriptions-item>
    <el-descriptions-item label="操作" :span="2">
        <el-button type="primary" 
         @click="add" 
          size="medium"
           :disabled="isDisbaled">新增</el-button>
    </el-descriptions-item>
  </el-descriptions>



    </div>
</template>
<script lang="ts">
import { defineComponent,onBeforeUnmount,onMounted,reactive,ref,shallowRef,toRefs, watchEffect,} from 'vue'
import WangEditor from "wangeditor";
import type {bindAddQuestionDto} from "@/dto/question/QuestionAddDto"
import {addTopic} from "@/api/exam"
import { ElMessage, ElMessageBox } from 'element-plus';

export default defineComponent({
    setup() {
        const data =reactive<bindAddQuestionDto>({
            content:"",
            typeX:"",
            types: [
             { id: "1",name: "选择题" },
             {id: "2",name: "简答题"}
         ],
         lv:1,
         checkLists:[],
         qOptions:[
            {id:1,content:"",isRight:0},
            {id:2,content:"",isRight:0}
        ],
        answer:[],
        analysis:"",
        isDisbaled:true
        });

        /**
         * 富文本开始
         * content是上方得data.content
         */
        const editorRef = shallowRef();
        const refs = {
      contentRef: ref(null),
    };
      
     // 配置菜单栏，设置不需要的菜单
     let instance:any;
    onMounted(() => {
      instance = new WangEditor(refs.contentRef.value);
      Object.assign(instance.config, {
        onchange(val:any) {
          data.content = val;
        },
      });
      instance.config.excludeMenus = ["emoticon", "video", "image"];
      instance.config.height = 150;
      instance.create();
    });

   
    onBeforeUnmount(() => {
      instance.destroy();
      instance = null;
    });

 /**
         * 富文本结束
         */
        const events={
          /**
           * 所有内容填选完毕,将按钮调为可用
           */
          IsDisabled:()=>{
              let isBan=true;
              let optionsCheck=data.qOptions.find(d=>d.isRight==1);
              let xuanIsNull=data.qOptions.find(d=>d.content=="");
              if(data.content.length!=0 && data.typeX!=''&&  data.checkLists.length!=0 && optionsCheck!=undefined && xuanIsNull==undefined){
                      isBan=false;
                  };
                 data.isDisbaled=isBan;
                  
          },
            
          /**
           * 添加默认题库试题
           */
            add:()=>{
                ElMessageBox.confirm('确认新增吗?', {confirmButtonText: '确认',cancelButtonText: '取消'})
                   .then(() => {
                    
                    addTopic([{
                    content:data.content,
                    type:data.typeX,
                    lv:data.lv,
                    labels:data.checkLists,
                    options:data.qOptions,
                    explain:data.analysis,
                }]).then((res:any)=>{
                   if(res.result===0){
                      ElMessage.success("操作成功");
                   }else{
                       ElMessage.success("操作失败,请联系管理员处理");
                   }
                  })

                }).catch(() => {

                })
                
                
            },
            /**
             * 响应选中答案 改变isRight
             */
            result:()=>{
                data.qOptions.forEach((d:any)=> {
                  d.isRight=0;
                });
                data.answer.forEach((d:any)=> {
                    data.qOptions[d].isRight=1;
                });
            },
            /**
             * 添加选项
             */
            addOption:()=>{
                if(data.qOptions.length>=10){
                    return
                }
                 let id= data.qOptions.length+1;
                 data.qOptions.push({id:id,content:"",isRight:0})
            },
            /**
             * 减少选项
             */
            minusOption:()=>{
                if(data.qOptions.length<3){
                      return
                }
                data.qOptions.length--;
            }
        }

        watchEffect(()=>{
          events.IsDisabled()
       });
    return{
        ...toRefs(data),
        ...events,
        ...refs,
    }
    },
})
</script>
